<!-- 表单类型 -->
<template>
	<!-- 不用v-model原因：v-model不能直接绑定props中的数据 -->
	<component :is="cpn" :config="config" :form="form"></component>
</template>

<script setup lang="ts">
import { shallowRef, watchEffect } from "vue";

const props = defineProps({
	config: { type: Object, default: () => ({}) },
	form: { type: Object, required: true }
});
//异步导入组件
let cpn = shallowRef();
// 正确写法

const importComponent = async () => {
	let modules = import.meta.glob("./component/**/*.vue"); // 获取到所有组件的路径
	const comp =
		modules[`./component/Custom${props.config.type || "Input"}/index.vue`]; // comp 打印出来是个promise
	comp()
		.then((myModule) => {
			cpn.value = myModule.default;
		})
		.catch(() => {});
};
importComponent();
</script>

<style></style>
